<!-- 收入合同 -->
<template>
    <div :style="{
        height: '100vh',
        overflow: 'hidden',
        position: 'relative',
        border: '1px solid #ebedf0',
        borderRadius: '2px',

        width: '100%',
    }">
        <a-card :bordered="false" class="mb-2">
            <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form">
                <a-row :gutter="24">
                    <a-col :span="6"> <a-form-item label="付款事由" name="reason">
                            <a-input v-model:value="queryForm.reason" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6"> <a-form-item label="项目名称" name="projectName">
                            <a-input v-model:value="queryForm.projectName" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                         <a-form-item label="付款类型" name="paymentType">
                  
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.paymentType" placeholder="请选择" :options="paymentType">

                            </a-select>
                        </a-form-item>

                    </a-col>
                    <a-col :span="6" v-show="advanced"> <a-form-item label="申请日期" name="applicationDate">
                            <a-row>
                                <a-range-picker v-model:value="queryForm.applicationDate" style="width: 100%;" />
                            </a-row>

                        </a-form-item>

                    </a-col>

                    <a-col :span="6" v-show="advanced"> <a-form-item label="付款金额">
                            <a-row>
                                <a-col :span="12">
                                    <a-input-number name="paymentAmounttart" v-model:value="queryForm.paymentAmounttart"
                                        min="0" style="width: 100%;" placeholder="起始金额" />
                                </a-col>
                                <a-col :span="12">
                                    <a-input-number name="paymentAmountEnd" v-model:value="queryForm.paymentAmountEnd"
                                        min="0" style="width: 100%;" placeholder="结束金额" />
                                </a-col>
                            </a-row>
                        </a-form-item>

                    </a-col>
                    <a-col :span="6" v-show="advanced"> <a-form-item label="申请人" name="createUserName">
                            <a-input v-model:value="queryForm.createUserName" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" v-show="advanced"> <a-form-item label="所属部门" name="orgName">
                            <a-input v-model:value="queryForm.orgName" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" v-show="advanced">

                        <a-form-item label="审核状态" name="mechanism">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.auditStatus" placeholder="请选择"
                                :options="auditStatusOptions">
                            </a-select>
                        </a-form-item>

                    </a-col>
                    <a-col :span="6">
                        <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                            {{ advanced ? '收起' : '展开' }}
                            <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                        </a>
                    </a-col>
                </a-row>
            </a-form> </a-card>
        <a-card :bordered="false">
            <s-table ref="tableRef" :data="loadData" bordered :row-key="(record) => record.id" :tool-config="toolConfig"
                :columns="columns" class="mb-2" :scroll="{ x: 1300, }">
                <template #operator class="table-operator">
                    <div style="display: flex; justify-content: space-between">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>
                        <!-- <a-space>
                            <a-button type="primary" @click="showEdit()">
                                <template #icon>
                                    <plus-outlined />
                                </template>
<span>新增</span>
</a-button>
</a-space> -->
                    </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>

                    <template v-if="column.key === 'control'">
                        <div>
                            <a @click="showInfo(record)">查看</a>
                        </div>
                    </template>
                </template>
            </s-table>
        </a-card>
    

        <info ref="infoRef"></info>
    </div>
</template>

<script setup name="receivableMeetSale">
import { roles, auditStatusOptions, contractType, invoiceType, paymentType } from '@/utils/constants.js'
import api from '@/api/finance/payment/index'
import info from './components/payment/info.vue'
// import edit from './components/payment/edit.vue'
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index', width: 50,
        align: 'center',
    },
    {
        title: '付款事由',
        dataIndex: 'cause',
        key: 'cause',
        width: 180,
        align: 'center',
    },
    {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName',
        width: 180,
        align: 'center',
    },

    {
        title: '申请日期',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 150,
        align: 'center',
    },

    {
        title: '付款金额',
        dataIndex: 'amount',
        key: 'amount',
        width: 120,
        align: 'center',
    },
    {
        title: "申请人",
        dataIndex: "createUserName",
        key: "createUserName", width: 120,
        align: 'center',
    },
    {
        title: "所属部门",
        dataIndex: "orgName",
        key: "orgName",
        width: 180,
        align: 'center',
    },
    {
        title: "审核状态",
        dataIndex: "stateText",
        key: "stateText",
        width: 120,
        align: 'center',
    },
    {
        title: "操作",
        dataIndex: "control",
        key: "control",
        width: 120,
        align: 'center',
        fixed: 'right'
    },
];
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const tableRef = ref()
const editRef = ref()
const isEdit = ref(false)
const showFliter = ref(false)
const showAdd = ref(false)
const queryForm = ref({})
const infoRef = ref()
const showInfo = (record) => {
    infoRef.value.show(record)
}


const remove = (record) => {
    console.log("remove id", record)
    api.delete([{ id: record.id }]).then((res) => {
        tableRef.value.refresh(true)
    })
}

const onQuery = () => {
    tableRef.value.refresh(true)
}
const submit = () => {
    editRef.value.submit()
}
const onClose = (refresh) => {
    showAdd.value = false
    if (refresh) {
        tableRef.value.refresh(true)
    }
}

const loadData = (parameter) => {
    queryForm.value.current = parameter.current
    queryForm.value.size = parameter.size
    return api.page(queryForm.value).then((res) => {
        return res
    })

}

const showEdit = (record) => {
    editRef.value.show(record)
    showAdd.value = true
    if (record) {
        isEdit.value = true
    } else {
        isEdit.value = false
    }
}
const reset = () => {
    queryForm.value = {}
}
</script>
<style scoped></style>././components/payment/edit2.vuecomponents/payment/edit.2vue
